/* eslint-disable no-debugger */
/* eslint-disable react/function-component-definition */
/**
 * 列配置组件
 * 组件描述：配置表格列的显示隐藏、固定。
 * @author LiAnqi
 * @Date 2022.2.23
 */

import React from 'react'
import { List, Switch, Drawer, Space } from 'antd'

const ConfigPanelForColumns = (props) => {
  const { ifVisible, onClose, dataSource, onChange } = props
  const handleCloseDrawer = () => {
    onClose()
  }

  const handleChange = (checked, index, open) => {
    // console.log(checked)
    onChange({ checked, index, propName: open })
  }

  return (
    <Drawer title="配置列" placement="right" onClose={handleCloseDrawer} open={ifVisible}>
      <List
        dataSource={dataSource}
        renderItem={(item, index) => (
          <List.Item key={item.key}>
            <List.Item.Meta title={item.title} description={item.key} />
            <div>
              <Space>
                <Switch
                  checked={item.open}
                  checkedChildren="显示"
                  unCheckedChildren="隐藏"
                  onChange={(checked, e) => {
                    handleChange(checked, index, 'open')
                  }}
                />
                <Switch
                  checked={item.fixed ? item.fixed : false}
                  checkedChildren="固定"
                  unCheckedChildren="不固定"
                  onChange={(checked, e) => {
                    handleChange(checked, index, 'fixed')
                  }}
                />
              </Space>
            </div>
          </List.Item>
        )}
      />
    </Drawer>
  )
}

export default ConfigPanelForColumns
